import {Image, StyleSheet, View, Text, TouchableOpacity, TextInput} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect} from "react";
import QRCode from 'react-native-qrcode-svg';

export default function settingScreen() {

    const router = useRouter();

    useEffect(() => {
    });


    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '创建超级群', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#F7F7F7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={styles.superGroupDetailContainer}>
                {/*<View style={styles.groupDetailItem}>*/}
                {/*    <View>*/}
                {/*        <Text>群二维码</Text>*/}
                {/*    </View>*/}
                {/*    <View>*/}
                {/*        <QRCode*/}
                {/*            value="https://example.com" // 你希望编码的信息*/}
                {/*            size={24}                  // 二维码的大小*/}
                {/*            color="black"               // 二维码的颜色*/}
                {/*            backgroundColor="white"     // 二维码的背景色*/}
                {/*        />*/}
                {/*    </View>*/}
                {/*</View>*/}
                <TouchableOpacity>
                    <View style={styles.groupDetailItem}>
                        <View>
                            <Text>类型</Text>
                        </View>
                        <View style={{ flexDirection: "row", alignItems: "center" }}>
                            <Text>行业</Text>
                            <AntDesign name="right" size={10} color="#9C9EAC" />
                        </View>
                    </View>
                </TouchableOpacity>
                <View style={styles.groupDetailItem}>
                    <View>
                        <Text>创建人</Text>
                    </View>
                    <View>
                        <TextInput placeholder='请输入创建人' />
                    </View>
                </View>
                <View style={styles.detailTitle}>
                    <Text>详细介绍</Text>
                </View>
                <View style={styles.detailDesc}>
                    <TextInput multiline={true} placeholder="详细介绍" style={{ height: "100%", width: "100%"}} />
                </View>
            </View>
            <View style={{ flex: 1 }}></View>
            <View style={styles.btnWrap}>
                <TouchableOpacity>
                    <View style={styles.ok}>
                        <Text style={styles.okText}>保存</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>

    );
}

const styles = StyleSheet.create({
    superGroupDetailContainer: {
        paddingHorizontal: 12,
        paddingBottom: 12,
        backgroundColor: "#fff",
        // flex: 1,
        marginHorizontal: 12,
        borderRadius: 10,
    },
    groupDetailItem: {
        flexDirection: "row",
        justifyContent: "space-between",
        borderBottomWidth: 0.3,
        paddingVertical: 12,
        borderBottomColor: "#E4E6EC",

    },
    detailDesc: {
        width: "100%",
        height: 100,
        backgroundColor: "#F7F7F7",
        marginTop: 12,
        borderRadius: 6,
        padding: 12,
    },
    detailTitle: {
        marginTop: 12,
    },
    ok: {
        width: "100%",
        height: 38,
        backgroundColor: "#EC6138",
        flexDirection: "row",
        justifyContent:"center",
        alignItems: "center",
        borderRadius: 19,
    },
    okText: {
        color: "#fff",
    },
    btnWrap: {
        backgroundColor: "#fff",
        paddingBottom: 23,
        paddingTop: 12,
        paddingHorizontal: 12,
    },
});
